/**
* 教员授权课程清单
*/
<template>
	<vp-main-page @refresh="loadDataList">
		<template #search>
			<el-form ref="searchFormRef" :model="searchForm" @submit.prevent @keyup.enter="loadDataList"
				label-width="120px">
				<vp-search-row :show-more="showMore">
					<vp-search-col>
						<el-form-item field="rydaBh">
							<template #label><vp-label zh="⼈员编号" en="Number" /></template>
							<el-input v-model="searchForm.rydaBh" v-trim placeholder="" clearable></el-input>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item field="rydaXm">
							<template #label><vp-label zh="姓名" en="Name" /></template>
							<el-input v-model="searchForm.rydaXm" v-trim placeholder="" clearable></el-input>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item field="courseBh">
							<template #label><vp-label zh="课程编号" en="Course No." /></template>
							<el-input v-model="searchForm.courseBh" v-trim placeholder="" clearable></el-input>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item field="courseName">
							<template #label><vp-label zh="课程名称" en="Course Name" /></template>
							<el-input v-model="searchForm.courseName" v-trim placeholder="" clearable></el-input>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item field="zzzt">
							<template #label><vp-label zh="在职状态" en="Employed status" /></template>
							<el-select class="w100" v-model="searchForm.zzzt" placeholder="请选择/Please Choose" clearable
								collapse-tags>
								<el-option :value="10" label="在职/Employed"></el-option>
								<el-option :value="20" label="离职/Unemployed"></el-option>
							</el-select>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item field="showYj">
							<template #label><vp-label zh="显示预警" en="Employed status" /></template>
							<el-checkbox v-model="searchForm.showYj" :true-value="10" :false-value="20"></el-checkbox>
						</el-form-item>
					</vp-search-col>
					<vp-search-col btn-col>
						<vp-btn-search :loading="loading" @click="loadDataList" />
						<vp-btn-reset @click="handleSearchReset" />
						<vp-btn-more @change="showMore = $event" />
					</vp-search-col>
				</vp-search-row>
			</el-form>
		</template>
		<template #table>
			<vp-vxe-table ref="tableRef" :data="tableData" row-key="id" v-loading="loading">
				<vxe-column type="seq" align="center" title="#" width="50" />
				<vxe-column field="rydaBh" show-overflow>
					<template #header><vp-label zh="编号" en="No." /></template>
				</vxe-column>
				<vxe-column field="rydaXm" show-overflow>
					<template #header><vp-label zh="姓名" en="Name" /></template>
					<template #default="scope">
						<span
							v-html="`${scope.row.rydaXm || ''} ${scope.row.zzzt === 10 ? '<span style=color:green;>(在职)</span>' : (scope.row.xb === 20 ? '<span style=color:red;>(离职)</span>' : '')}`"></span>
					</template>
				</vxe-column>
				<vxe-column field="courseBh" show-overflow>
					<template #header><vp-label zh="课程编号" en="Course No." /></template>
					<template #default="scope">
						<span
							v-html="`${scope.row.courseBh || ''} ${scope.row.courseZt === 89 ? '<span style=color:green;>(生效)</span>' : (scope.row.courseZt === 98 ? '<span style=color:red;>(作废)</span>' : '')}`"></span>
					</template>
				</vxe-column>
				<vxe-column field="courseName" show-overflow>
					<template #header><vp-label zh="课程名称" en="Course Name" /></template>
				</vxe-column>
				<vxe-column field="sqrq" show-overflow>
					<template #header><vp-label zh="授权开始" en="Authorization Start" /></template>
				</vxe-column>
				<vxe-column field="yxq" show-overflow>
					<template #header><vp-label zh="授权结束" en="Authorization End" /></template>
				</vxe-column>
			</vp-vxe-table>
		</template>
		<template #pagination>
			<vp-pagination @change="loadDataList" :total="page.total" v-model:currentPage="page.pageNum"
				v-model:pageSize="page.pageSize">
			</vp-pagination>
		</template>
	</vp-main-page>
</template>

<script setup lang="ts" name="trainingTeacherCourseIndex">
import { ref, reactive, onMounted } from 'vue';
import request from '/@/utils/request';
import { DEFAULT_PAGE } from '/@/utils/page';

const searchForm = reactive({
	courseBh: "",
	courseName: "",
	rydaBh: "",
	rydaXm: "",
	zzzt: null,
	showYj: null,
});

const page = reactive({
	...DEFAULT_PAGE,
})

const showMore = ref(false);
const loading = ref(false);
const tableData = ref([]);

// 加载列表数据
const loadDataList = () => {
	loading.value = true
	request.get('/training/teacherAuthList/queryPage', {
		params: {
			...searchForm,
			...page,
		}
	}).then(res => {
		tableData.value = res?.data?.list || []
		page.total = res?.data?.total || 0
		page.pageNum = res?.data?.pageNum || 1
	}).finally(() => {
		loading.value = false
	})
}

const searchFormRef = ref();

// 重置搜索条件
const handleSearchReset = () => {
	searchForm.courseBh = "";
	searchForm.courseName = "";
	searchForm.rydaXm = "";
	searchForm.rydaBh = "";
	searchForm.zzzt = null;
	searchForm.showYj = null;

	searchFormRef.value.resetFields();
	loadDataList()
}

// 组件挂载后事件
onMounted(() => {
	loadDataList()
})

const tableRef = ref();

</script>

<style lang="scss" scoped></style>